<template>
	<div style="display: flex; justify-content: center; margin-top: 150px;">
		<el-card style="width: 550px; margin-bottom: 350px;">
			<div>
				<h1 style="color:#409EFF; display:flex; justify-content:center; margin-top:10px">个人信息修改</h1>
			</div>
			<el-form ref="form" :model="form" label-width="120px" label-position="right">
				<el-form-item label="账号"  prop="username">
					<el-input v-model="form.username" :disabled="true" style="width: 80%"></el-input>
				</el-form-item>
				<el-form-item label="手机号" prop="telephone">
					<el-input v-model.number="form.telephone" style="width: 80%"></el-input>
				</el-form-item>
				<el-form-item label="邮箱地址" prop="mail">
					<el-input v-model="form.mail" style="width: 80%"></el-input>
				</el-form-item>


			</el-form>

			<el-row>
				<el-col :span="8" />
				<el-col :span="8">
					<el-button @click="cancel">取 消</el-button>
					<el-button type="primary" @click="save">确 定</el-button>
				</el-col>
				<el-col :span="8" />
			</el-row>

		</el-card>

	</div>

</template>

<script>
	import {
		ElMessage
	} from 'element-plus'


	export default {
		data() {

			return {

				form: {
					id: '',
					username: '',
					password: '',
					telphone: '',
					mail: '',
					role: '',
				},


			}
		},

		created() {
			let userId = window.sessionStorage.getItem("userId");
			this.$api.get("/user/"+userId)
				.then((res) => {
					if (res.data.code === '200') {
						this.form=res.data.data;
					} else {
						ElMessage.error(res.data.msg)
					}
			
				});
		},

		methods: {



			reset() {
				this.loginFrom.main = '';
				this.loginFrom.telphone = '';
			},

			save() {
				this.$api.put("/user/update", this.form)
					.then((res) => {
						if (res.data.code === '200') {
							ElMessage({
								message: "修改成功",
								type: 'success',
							})
						} else {
							ElMessage.error(res.data.msg)
						}

					});


			},

		}
	}
</script>

<style>
</style>
